<template>
  <AppCover section="about" :bgURL="coverURL" :bgPrURL="coverPrURL" />
  <div id="About">    
    <div class="introduce">
      <h1>New Start</h1>
      <p>观于海者难为水 <i class="iconfont icon-lianhua"></i></p>
      <h1>Contact</h1>
      <p><b>E-mail:</b> charlesxtd#foxmail.com(replace#with@)</p>
      <p><b>Gitee:</b> @heartlight</p>
      <p><b>Here:</b> 如切如磋，如琢如磨。欢迎指正，感谢赐教。</p>
      <div class="welcome">
        <div class="content">
          <div class="left">
            <svg class="icon xiaolian" aria-hidden="true">
              <use xlink:href="#icon-xiaolian"></use>
            </svg>
          </div>
          <div class="right">
            <p>欢迎光临</p>
            <p>有缘千里来相会，无缘对面不相识。</p>
          </div>
        </div>        
      </div>
    </div>
    <AppMsgBoard :section="sectionVal" />    
  </div>  
  <AppNav />
  <AppFooter />
</template>

<script>

import AppNav from '@/components/AppNav'
import AppCover from '@/components/AppCover'
import AppFooter from '@/components/AppFooter'
import AppMsgBoard from '@/components/AppMsgBoard'

export default {
  name: 'About',
  components:{ AppNav,AppCover, AppFooter, AppMsgBoard },
  data(){
    return {
      sectionVal: 'about',
      coverURL: '/files/img/section_cover/about.jpg',
      coverPrURL: '/files/img/section_cover/about_pr.jpg'
    }
  }
}
</script>

<style lang="less" scoped>
@pageWidth: 48rem;

#About{
  width: @pageWidth;
  margin: 3rem auto;  
  .introduce{
    text-align: left;
    padding: 0 15px;
    .welcome{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 10px;
      background-color: rgba(56,132,255,0.07);
      border: 1px solid #ddd;
      border-left: 5px solid #3884FF;
      border-radius: 5px;
      .content{
        display: flex;
        .left{
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-right: 20px;
          margin-left: 10px;
          .xiaolian{
            font-size: 30px;
          }
        }
        .right{
          p{
            margin: 10px 0;            
          }
        }
      }
    }
    h1:nth-child(3){
      margin-top: 2.6rem;
    }
    p{
      margin-top: 1.5rem;
      font-size: 16px;
      .icon-lianhua{
        color: #ff4b41;
        border: 1px solid #ff4b41;        
        font-weight: bold;
        padding: 5px 15px;        
        border-radius: 3px;
        margin-left: 10px;
        font-size: 18px;
        vertical-align: text-bottom;
      }      
    }
    p:nth-child(6){
      margin-bottom: 3rem;
    }
  }
}


/* 很小的设备（手机等，小于 600px） */
@media only screen and (max-width: 600px) { 
  #About {
    max-width: 100vw;
  }
}

/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */
@media only screen and (min-width: 600px) { 
  #About {
    min-width: 34rem;
  }
}

/* 中型大小设备（横屏的平板, 大于 768px） */
@media only screen and (min-width: 768px) { 
  #About {
    min-width: 38rem
  }
}

/* 大型设备（电脑, 大于 992px） */
@media only screen and (min-width: 992px) { 
  #About {
    min-width: 44rem;
  }
}

/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */
@media only screen and (min-width: 1200px) { 
  #About {
    min-width: 48rem;
  }
}
</style>